<template>
	<view>
		<view class="auth">
			<view class="wanl-title">欢迎注册账号</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input placeholder="请输入手机号" type="number" maxlength="11" confirm-type="next"
						placeholder-class="placeholder" name="mobile" v-model="mobile" @input="onKeyInput"></input>
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" formType="submit"
						:disabled="submitDisabled">获取验证码</button>
				</view>
				<!-- 同意服务条款 -->
				<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause"
					@change="CheckboxChange">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''"
						:checked="checked == 2 ? true : false" value="2" />
					<view>
						我已阅读<text
							@tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">用户协议</text>及<text
							@tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护')">隐私权保护声明</text>
					</view>
				</checkbox-group>
			</form>
		</view>
		<view class="auth-foot">
			<view class="menu text-grey">
				<text @tap="auth">登录</text>
				<text @tap="help">帮助</text>
			</view>
		</view>
	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				submitDisabled: true,
				title: '表单验证',
				pageroute: '',
				mobile: '',
				checked: 0,
				isBuy: true
			};
		},
		onLoad(options) {
			this.pageroute = options.url;
			if (options.mobile) {
				this.mobile = options.mobile;
				this.submitDisabled = false;
			}
			
		},
		methods: {
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			onKeyInput: function(e) {
				this.submitDisabled = false
			},
			formSubmit: function(e) {
				if (this.isBuy) {
					this.isBuy = false
					if (this.checked == 2) {
						//定义表单规则
						var rule = [{
							name: 'mobile',
							checkType: 'phoneno',
							errorMsg: '请输入正确的手机号'
						}];
						//进行表单检查
						var formData = e.detail.value;
						var checkRes = graceChecker.check(formData, rule);
						if (checkRes) {
							uni.request({
								url: '/wanlshop/validate/check_mobile_available',
								data: {
									mobile: this.mobile
								},
								// 1.1.8 升级
								complete: res => {
									setTimeout(() => {
										this.isBuy = true;
									}, 1000)
									if (res.res.code == 1) {
										console.log(this.pageroute,'ddddddddddddddddddddd')
										this.$wanlshop.to(
											`validcode?event=register&mobile=${e.detail.value.mobile}&url=${this.pageroute}`,
											'slide-in-bottom', 200);
									} else {
										uni.showModal({
											title: '手机号已被注册',
											content: '点击确定使用手机号登录',
											success: (msg) => {
												if (msg.confirm) {
													this.$wanlshop.to(
														`phone?mobile=${e.detail.value.mobile}&url=${this.pageroute}`,
														'slide-in-bottom', 200);
												} else if (msg.cancel) {
													console.log('用户点击取消');
												}
											}
										});
									}
								}
							});
						} else {
							this.$wanlshop.msg(graceChecker.error);
						}
					} else {
						this.isBuy = true;
						this.checked = 1;
						setTimeout(() => {
							this.checked = 0;
							this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
						}, 300)
					}
				}
			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			}
		}
	};
</script>

<style>
	@import url("auth.css");
</style>